<script setup lang="ts">

</script>

<template>
  <div class="module-grid">
    <div class="module xianyu-coin">
      <img src="/icons/xianyu_coin.png" alt="闲鱼币" class="module-img" />
    </div>
    <div class="module cycle-shop">
      <img src="/icons/cycle_shop.png" alt="循环商店" class="module-img" />
    </div>
    <div class="module earn-money">
      <img src="/icons/earn_money.png" alt="闲鱼赚钱" class="module-img" />
    </div>
    <div class="module small-court">
      <img src="/icons/small_court.png" alt="小法庭" class="module-img" />
    </div>
    <div class="module short-drama">
      <img src="/icons/short_drama.png" alt="看短剧" class="module-img" />
    </div>
  </div>
</template>

<style scoped>
.module-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  grid-template-rows: auto auto;
}

.module {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.module-img {
  width: 100%;
  height: auto;
  display: block;
}

.xianyu-coin {
  grid-row: span 2; /* 跨两行 */
}
</style>